<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>
    <style type="text/css">
        .ld {
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    {{formData.pvFromData}}
    <parent class="ld" v-bind:pv.sync="formData.pvFromData"></parent>
    <br>
    {{formData.v}}
    <v v-bind:va.sync="formData.v"></v>
</div>
<hr/>

</body>
<script type="application/javascript">
    Vue.component(
        'child',
        {
            template:`<input type="text"
                             v-model="sv"
                             v-on:change="$emit('update:v', $event.target.value)"
            >`,
            props:["v"],
            model:{
                prop: 'v'
            },
            data:function(){
                return {
                    "sv" : this.v
                };
            }
        }
    );

    Vue.component(
        'parent',
        {
            template:`
              <div>
              {{dataFromC}}
              <child v-bind:v.sync="dataFromC"
                     @update:v="uv"
              ></child>
              </div>`,
            props:["pv"],
            data:function (){
                return {
                    dataFromC:this.pv
                }
            },
            methods:{
                uv:function(v){
                    this.$emit("update:pv" , v);
                }
            }
        }
    );

    Vue.component(
        'v',
        {
            template:`<div>{{vv}} <input type="text" v-model="vv" @change="uv"></div>`,
            props:["va"],
            data:function (){
                return {
                    vv:this.va
                }
            },
            methods:{
                uv:function(v){
                    this.$emit("update:va" , this.vv);
                }
            }
        }
    );

    var app_data = {
        formData:{
            pvFromData:"pvFromData",
            v:"123"
        }
    };

    var app = new Vue({
        el: '#app',
        data: app_data
    });

</script>
</html>
